import React, {useState} from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
import {inject, observer} from 'mobx-react';
import {useNavigation, CommonActions} from '@react-navigation/native';
import {Box, Button, Icon, Input, Text, Divider, Flex} from 'native-base';
import SvgIcons from '@/assets/svg';
const Login = observer(() => {
  const navigation = useNavigation();
  const [showPassword, setShowPassword] = useState(false);
  const handleState = () => {
    setShowPassword(showState => {
      return !showState;
    });
  };
  const login = () => {
    navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [{name: 'Tbabar'}],
      }),
    );
  };
  const register = () => {
    // 通过 navigation 跳转到 register 页面
    navigation.navigate('Register', {});
  };
  // 重置密码
  const resetPassword = () => {
    navigation.navigate('ResetPassword');
  };
  return (
    <SafeAreaView>
      <Box pl="8" pr="8" pt="24">
        <Input h={10} InputLeftElement={<Icon as={<SvgIcons.PhoneIcon width={24} height={24} />} pl="8" color="muted.400" />} placeholder="手机号码"></Input>
        <Input
          mt="6"
          h={10}
          type={showPassword ? 'text' : 'password'}
          InputLeftElement={<Icon as={<SvgIcons.LockIcon width={24} height={24} />} pl="8" color="muted.400" />}
          placeholder="登录密码"
          InputRightElement={
            <Icon
              as={showPassword ? <SvgIcons.EyeIcon width={24} height={24} onPress={handleState} /> : <SvgIcons.EyeOffIcon onPress={handleState} width={24} height={24} />}
              pr="8"
              color="muted.400"
            />
          }></Input>
        <Box mt="3">
          <Text textAlign="right" onPress={resetPassword}>
            忘记密码?
          </Text>
        </Box>
        <Button mt="3" size="md" h="16" variant="solid" isDisabled={false} isFocusVisible={false} onPress={login} borderRadius="full">
          登录
        </Button>
        <Box mt="10">
          <Text textAlign="center">
            还没有账号？
            <Text color="primary.600" onPress={register}>
              注册
            </Text>
          </Text>
        </Box>
        <Box alignItems="center" mt="6">
          <Flex direction="row" alignItems="center">
            <Divider bg="#737373" flex={1} mx="2" />
            <Text>OR</Text>
            <Divider bg="#737373" flex={1} mx="2" />
          </Flex>
        </Box>
        <Button mt="10" size="md" h="16" variant="outline" isDisabled={false} isFocusVisible={false} onPress={login} borderRadius="full" alignItems="center">
          <Flex direction="row" alignItems="center" justifyContent="center">
            <SvgIcons.WeChat width={24} height={24} color="#67d65d" />
            <Text pl="3">微信登录</Text>
          </Flex>
        </Button>
        {/* 微博登录 */}
        <Button mt="6" size="md" h="16" variant="outline" isDisabled={false} isFocusVisible={false} onPress={login} borderRadius="full">
          <Flex direction="row" alignItems="center" justifyContent="center">
            <SvgIcons.Weibo width={24} height={24} color="red" />
            <Text pl="3">微博登录</Text>
          </Flex>
        </Button>
      </Box>
    </SafeAreaView>
  );
});

export default inject(store => store)(Login);
